<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="投诉商家" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="complain">
			<view class="complain-title">
				<view @click="selectIndex = 0" :class="{ 'complain-title-item-active': selectIndex === 0 }" class="complain-title-item">全部</view>
				<view @click="selectIndex = 1" :class="{ 'complain-title-item-active': selectIndex === 1 }" class="complain-title-item">未处理</view>
				<view @click="selectIndex = 2" :class="{ 'complain-title-item-active': selectIndex === 2 }" class="complain-title-item">处理中</view>
				<view @click="selectIndex = 3" :class="{ 'complain-title-item-active': selectIndex === 3 }" class="complain-title-item">已处理</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 0" @scrolltolower="allScrolltolower" scroll-y class="complain-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 0" @scrolltolower="allScrolltolower" scroll-y class="complain-list">
			<!-- #endif -->
				<view class="complain-list-item" v-for="item of allList" :key="item.id">
					<view class="complain-list-item-title">
						<text class="complain-list-item-title-txt">商家名称：{{ item.storeName }}</text>
						<text :style="{color: (item.status === '0' ? '#F02230;' : item.status === '1' ? '#F7B500' : item.status === '2' ? '#0091FF' : '' )}" class="complain-list-item-title-status">{{ item.status === "0" ? "未处理" : item.status === "1" ? "处理中" : item.status === "2" ? "已处理" : "" }}</text>
					</view>
					<text class="complain-list-item-ddh">投诉单号：{{ item.id }}</text>
					<text class="complain-list-item-time">投诉时间：{{ item.createdAt }}</text>
					<text class="complain-list-item-line"></text>
					<view class="complain-list-item-content">{{ item.content }}</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 1" @scrolltolower="noHandleScrolltolower" scroll-y class="complain-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 1" @scrolltolower="noHandleScrolltolower" scroll-y class="complain-list">
			<!-- #endif -->
				<view class="complain-list-item" v-for="item of nohandleList" :key="item.id">
					<view class="complain-list-item-title">
						<text class="complain-list-item-title-txt">商家名称：{{ item.storeName }}</text>
						<text :style="{color: (item.status === '0' ? '#F02230;' : item.status === '1' ? '#F7B500' : item.status === '2' ? '#0091FF' : '' )}" class="complain-list-item-title-status">{{ item.status === "0" ? "未处理" : item.status === "1" ? "处理中" : item.status === "2" ? "已处理" : "" }}</text>
					</view>
					<text class="complain-list-item-ddh">投诉单号：{{ item.id }}</text>
					<text class="complain-list-item-time">投诉时间：{{ item.createdAt }}</text>
					<text class="complain-list-item-line"></text>
					<view class="complain-list-item-content">{{ item.content }}</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 2" @scrolltolower="handleIngScrolltolower" scroll-y class="complain-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 2" @scrolltolower="handleIngScrolltolower" scroll-y class="complain-list">
			<!-- #endif -->
				<view class="complain-list-item" v-for="item of handleingList" :key="item.id">
					<view class="complain-list-item-title">
						<text class="complain-list-item-title-txt">商家名称：{{ item.storeName }}</text>
						<text :style="{color: (item.status === '0' ? '#F02230;' : item.status === '1' ? '#F7B500' : item.status === '2' ? '#0091FF' : '' )}" class="complain-list-item-title-status">{{ item.status === "0" ? "未处理" : item.status === "1" ? "处理中" : item.status === "2" ? "已处理" : "" }}</text>
					</view>
					<text class="complain-list-item-ddh">投诉单号：{{ item.id }}</text>
					<text class="complain-list-item-time">投诉时间：{{ item.createdAt }}</text>
					<text class="complain-list-item-line"></text>
					<view class="complain-list-item-content">{{ item.content }}</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 3 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 3" @scrolltolower="alreadyHandleScrolltolower" scroll-y class="complain-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 3 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' v-show="selectIndex === 3" @scrolltolower="alreadyHandleScrolltolower" scroll-y class="complain-list">
			<!-- #endif -->
				<view class="complain-list-item" v-for="item of alreadyHandleList" :key="item.id">
					<view class="complain-list-item-title">
						<text class="complain-list-item-title-txt">商家名称：{{ item.storeName }}</text>
						<text :style="{color: (item.status === '0' ? '#F02230;' : item.status === '1' ? '#F7B500' : item.status === '2' ? '#0091FF' : '' )}" class="complain-list-item-title-status">{{ item.status === "0" ? "未处理" : item.status === "1" ? "处理中" : item.status === "2" ? "已处理" : "" }}</text>
					</view>
					<text class="complain-list-item-ddh">投诉单号：{{ item.id }}</text>
					<text class="complain-list-item-time">投诉时间：{{ item.createdAt }}</text>
					<text class="complain-list-item-line"></text>
					<view class="complain-list-item-content">{{ item.content }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { config } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		components: {
			uniNavBar
		},
		mixins: [myMixin],
		data() {
			return {
				appListHeight: 0,
				h5ListHeight: 0,
				selectIndex: 0,
				// 全部的
				allPage: 1,
				allSize: 10,
				allList: [],
				allTotal: 0,
				allTotalPage: 0,
				// 未处理的
				nohandlePage: 1,
				nohandleSize: 10,
				nohandleList: [],
				nohandleTotal: 0,
				nohandleTotalPage: 0,
				// 处理中的
				handleingPage: 1,
				handleingSize: 10,
				handleingList: [],
				handleingTotal: 0,
				handleingTotalPage: 0,
				// 已经处理的
				alreadyHandlePage: 1,
				alreadyHandleSize: 10,
				alreadyHandleList: [],
				alreadyHandleTotal: 0,
				alreadyHandleTotalPage: 0,
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('role')
					uni.removeStorageSync('memberId')
					uni.removeStorageSync('token')
					uni.removeStorageSync('openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this._getAllComplainData() // 全部
			this._getNoHandleComplainData() // 未处理
			this._getHandleingComplainData() // 处理中
			this._getAlreadyHandleComplainData() // 已处理
		},
		onReady() {
			const that = this
			uni.getSystemInfo({
				success: ((res) => {
					let info = uni.createSelectorQuery().select(".complain-title");
					info.boundingClientRect(function(data) {
						that.h5ListHeight = res.windowHeight - data.height // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
						that.appListHeight = res.windowHeight - res.statusBarHeight - 44 - data.height
					}).exec()
				})
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			if (this.selectIndex === 0) {
				this.allPage = 1
				this.allSize = 10
				this.allList = []
				this.allTotal = 0
				this.allTotalPage = 0
				this._getAllComplainData()
			} else if (this.selectIndex === 1) {
				this.nohandlePage = 1
				this.nohandleSize = 10
				this.nohandleList = []
				this.nohandleTotal = 0
				this.nohandleTotalPage = 0
				this._getNoHandleComplainData()
			} else if (this.selectIndex === 2) {
				this.handleingPage = 1
				this.handleingSize = 10
				this.handleingList = []
				this.handleingTotal = 0
				this.handleingTotalPage = 0
				this._getHandleingComplainData() // 处理中
			} else if (this.selectIndex === 3) {
				this.alreadyHandlePage = 1
				this.alreadyHandleSize = 10
				this.alreadyHandleList = []
				this.alreadyHandleTotal = 0
				this.alreadyHandleTotalPage = 0
				this._getAlreadyHandleComplainData() // 已处理
			}
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			pageTotal(rowCount, pageSize) {
				if (rowCount === null || rowCount === "") {
					return 0;
				} else {
					if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
						return parseInt(rowCount / pageSize)
					}
					if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
						return parseInt(rowCount / pageSize) + 1
					}
				}
			},
			// 全部的
			_getAllComplainData() {
				const allPage = this.allPage
				const allSize = this.allSize
				uni.request({
					url: `${config.api_base_url}member/complaint/${allPage}/${allSize}`,
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token'),
						'Content-Type': 'application/json'
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.allTotal = data.total
							this.allTotalPage = this.pageTotal(this.allTotal, this.allSize)
							this.allList = this.allList.concat(data.rows)
						} else {
							this.allTotal = 0
							this.allTotalPage = this.pageTotal(this.allTotal, this.allSize)
							this.allList = []
						}
					}),
					fail: (() => {
						uni.showToast({
							title: "网络异常, 请求失败",
							icon: "none"
						});
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 没有处理的
			_getNoHandleComplainData() {
				const allPage = this.nohandlePage
				const allSize = this.nohandleSize
				uni.request({
					url: `${config.api_base_url}member/complaint/0/${allPage}/${allSize}`,
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.nohandleTotal = data.total
							this.nohandleTotalPage = this.pageTotal(this.nohandleTotal, this.nohandleSize)
							this.nohandleList = this.nohandleList.concat(data.rows)
						} else {
							this.nohandleTotal = 0
							this.nohandleTotalPage = this.pageTotal(this.nohandleTotal, this.nohandleSize)
							this.nohandleList = []
						}
					}),
					fail: (() => {
						uni.showToast({
							title: "网络异常, 请求失败",
							icon: "none"
						});
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 正在处理的
			_getHandleingComplainData() {
				const allPage = this.handleingPage
				const allSize = this.handleingSize
				uni.request({
					url: `${config.api_base_url}member/complaint/1/${allPage}/${allSize}`,
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.handleingTotal = data.total
							this.handleingTotalPage = this.pageTotal(this.handleingTotal, this.handleingSize)
							this.handleingList = this.handleingList.concat(data.rows)
						} else {
							this.handleingTotal = 0
							this.handleingTotalPage = this.pageTotal(this.handleingTotal, this.handleingSize)
							this.handleingList = []
						}
					}),
					fail: (() => {
						uni.showToast({
							title: "网络异常, 请求失败",
							icon: "none"
						});
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 已经处理的
			_getAlreadyHandleComplainData() {
				const allPage = this.alreadyHandlePage
				const allSize = this.alreadyHandleSize
				uni.request({
					url: `${config.api_base_url}member/complaint/2/${allPage}/${allSize}`,
					header: {
						'AUTH': 'ROBOT ' + uni.getStorageSync('token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.alreadyHandleTotal = data.total
							this.alreadyHandleTotalPage = this.pageTotal(this.alreadyHandleTotal, this.alreadyHandleSize)
							this.alreadyHandleList = this.alreadyHandleList.concat(data.rows)
						} else {
							this.alreadyHandleTotal = 0
							this.alreadyHandleTotalPage = this.pageTotal(this.alreadyHandleTotal, this.alreadyHandleSize)
							this.alreadyHandleList = []
						}
					}),
					fail: (() => {
						uni.showToast({
							title: "网络异常, 请求失败",
							icon: "none"
						});
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 全部
			allScrolltolower() {
				const page1 = this.allPage + 1;
				const totalPage = this.allTotalPage
				if (page1 <= totalPage) {
					this.allPage = page1
					this._getAllComplainData()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			// 未处理
			noHandleScrolltolower() {
				const page1 = this.nohandlePage + 1;
				const totalPage = this.nohandleTotalPage
				if (page1 <= totalPage) {
					this.nohandlePage = page1
					this._getNoHandleComplainData()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			// 处理中
			handleIngScrolltolower() {
				const page1 = this.handleingPage + 1;
				const totalPage = this.handleingTotalPage
				if (page1 <= totalPage) {
					this.handleingPage = page1
					this._getHandleingComplainData()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			// 已处理
			alreadyHandleScrolltolower() {
				const page1 = this.alreadyHandlePage + 1;
				const totalPage = this.alreadyHandleTotalPage
				if (page1 <= totalPage) {
					this.alreadyHandlePage = page1
					this._getAlreadyHandleComplainData()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style>
page {
	background-color: #F6F5F8;
	width: 100%;
}
</style>
<style scoped>
	.complain {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.complain-title {
		width: 100%;
		height: 64rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 14rpx;
		padding-right: 16rpx;
		background-color: #fff;
		box-sizing: border-box;
		border-top: 1px solid #eee;
	}
	.complain-title-item {
		width: 25%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.85);
	}

	.complain-title-item-active {
		color: #F02230;
		position: relative;
	}
	.complain-title-item-active::after {
		position: absolute;
		content: ' ';
		width: 62rpx;
		height: 4rpx;
		border-radius: 2rpx;
		background-color: #F02230;
		position: absolute;
		left: 50%;
		margin-left: -31rpx;
		bottom: -8rpx;
	}

	.complain-list {
		width: 100%;
		box-sizing: border-box;
		padding-left: 14rpx;
		padding-right: 16rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.complain-list-item {
		width: 100%;
		box-sizing: border-box;
		padding-top: 24rpx;
		padding-right: 28rpx;
		padding-bottom: 40rpx;
		padding-left: 36rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 12rpx;
	}

	.complain-list-item:last-child {
		margin-bottom: 0;
	}

	.complain-list-item-title {
		display: flex;
		align-items: center;
	}
	.complain-list-item-title-txt {
		font-size: 28rpx;
		font-weight: 600;
		color: #333333;
	}
	.complain-list-item-title-status {
		font-size: 24rpx;
		font-weight: 400;
		margin-right: 0;
		margin-left: auto;
	}
	.complain-list-item-ddh {
		margin-top: 6rpx;
		font-size: 24rpx;
		color: #6D7278;
		font-weight: 400;
	}
	.complain-list-item-time {
		margin-top: 6rpx;
		font-size: 24rpx;
		color: #6D7278;
		font-weight: 400;
	}
	.complain-list-item-line {
		margin-top: 6rpx;
		width: 100%;
		height: 2rpx;
		background-color: #eee;
	}
	.complain-list-item-content {
		margin-top: 12rpx;
		font-size: 28rpx;
		color: #6D7278;
		font-weight: 400;
		line-height: 40rpx;
	}
</style>
